<template>
  <div class="home" style="width: 100%;height:100%;">
    <!-- <Dingbu :nameTitle="PageName"></Dingbu> -->
    <div class="content">
        <div class="top">
          <Button type="success" @click="addCate" style="float: right;margin-right:15px;">添加分类</Button>
        </div>
        <div class="container">
          <Table size="large" :columns="columns" :data="tabledata"></Table>
        </div>
    </div>
    <Modal v-model="modal1" title="添加分类" @on-ok="okAdd" @on-cancel="cancelAdd">
      <Form ref="formItem" :model="formItem" :label-width="60" :rules="ruleValidate">
        <FormItem label="名称" prop="name">
          <Input v-model="formItem.name" placeholder="请输入分类名称"></Input>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="modal2" title="编辑分类" @on-ok="okEdit" @on-cancel="cancelEdit">
      <Form ref="formItem" :model="formItem" :label-width="60" :rules="ruleValidate">
        <FormItem label="名称" prop="name">
          <Input v-model="formItem.name" placeholder="请输入分类名称"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import Dingbu from "../header/dingbu.vue";
import { mapGetters, mapMutations, mapActions } from "vuex";
import { cate_list, cate_detail, add_cate, edit_cate, del_cate } from "../../api/shop/shop.js";
export default {
  data() {
    return {
      PageName: "商品分类",
      modal1: false,
      modal2: false,
      formItem: {
        name: ''
      },
      ruleValidate:{
        name:[
          { required: true, message: '请输入完成信息', trigger: 'blur' }
        ]
      },
      columns: [
        {
          title: '分类名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
                h('Button', {
                    props: {
                        type: 'success',
                        size: 'small'
                    },
                    style: {
                        marginRight: '5px'
                    },
                    on: {
                        click: () => {
                            this.modal2 = true
                            this.Edit_cate(params.row.id)
                        }
                    }
                }, '编辑'),
                h("Poptip",{
                  props: {
                    confirm: true,
                    title: '确定删除该分类吗？'
                  },
                  on: {
                    'on-ok': () => {
                      del_cate({ id: params.row.id }).then(res => {
                        this.tabledata.splice(params.index, 1);
                        this.$Message.success("删除成功！");
                      });
                    },
                    'on-cancel': () => {
                      this.$Message.info('已取消该次操作');
                    }
                  }
                },[
                  h('Button', {
                    props: {
                        type: 'error',
                        size: 'small'
                    },
                    style: {
                        marginRight: '5px'
                    },
                    on: {
                        click: () => {
                            this.deletype(params);
                        }
                    }
                  }, '删除')
                ])
            ]);
          }
        }
      ],
      tabledata: [],
    };
  },
  mounted() {
  },
  components: {
    Dingbu
  },
  created() {
    this.getData();
  },
  methods: {
    addCate() {
      this.modal1 = true;
      this.formItem.name = '';
    },
    okAdd () {
      add_cate({ name: this.formItem.name }).then(res => {
        this.getData();
        this.formItem.name = '';
        this.$Message.success("添加成功！");
      }); 
    },
    cancelAdd () {},
    okEdit () {
      edit_cate({ id:this.id, name: this.formItem.name }).then(res => {
        this.getData();
        this.$Message.success("编辑成功！");
      });
    },
    cancelEdit () {},
    Edit_cate(id) {
      this.id = id;
      cate_detail({
        token: 1,
        id: id
      }).then(res => {
        this.formItem.name = res.data.name;
      });
    },
    deletype() {

    },
    getData() {
      cate_list({
        token: 1
      }).then(res => {
        this.tabledata = res.data;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../css/common.scss";
.content {
  width: 100%;
  margin: 20px auto;
  >.top {
    margin-bottom: 20px;
    overflow: hidden;
  }
}
</style>

